<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>石头剪刀布游戏</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            display: flex;
        }
        .game-area {
            flex: 1;
        }
        .info-area {
            width: 200px;
            margin-left: 20px;
            text-align: left;
        }
        .btn {
            margin: 10px;
            font-size: 24px;
            padding: 10px 20px;
            border-radius: 10px;
        }
        .choices {
            margin-top: 20px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 游戏区域 -->
        <div class="game-area">
            <h1>石头剪刀布游戏</h1>
            <div>
                <button class="btn btn-primary" onclick="makeChoice('rock')">🪨 石头</button>
                <button class="btn btn-primary" onclick="makeChoice('paper')">📄 布</button>
                <button class="btn btn-primary" onclick="makeChoice('scissors')">✂️ 剪刀</button>
            </div>
            <div id="result" class="mt-4"></div>
            <div class="choices" id="choices"></div>
        </div>
        <!-- 信息区域 -->
        <div class="info-area">
            <h4>玩家信息</h4>
            <p>昵称：<span id="nickname"></span></p>
            <p>IP地址：<span id="ip_address"></span></p>
        </div>
    </div>

    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        var playerNickname = '';

        socket.on('connect', function() {
            // 连接后，提示玩家输入昵称
            playerNickname = prompt('请输入您的昵称：');
            if (!playerNickname) {
                playerNickname = '玩家';
            }
            document.getElementById('nickname').innerText = playerNickname;
            // 发送昵称给服务器
            socket.emit('player_nickname', {'nickname': playerNickname});
        });

        socket.on('player_info', function(data) {
            // 显示玩家的IP地址
            document.getElementById('ip_address').innerText = data.ip;
        });

        socket.on('game_result', function(data) {
            var resultDiv = document.getElementById('result');
            var resultText = '结果：' + data.result + '<br>';
            for (var nickname in data.choices) {
                resultText += nickname + ' 出了 ' + getChoiceName(data.choices[nickname]) + '<br>';
            }
            resultDiv.innerHTML = resultText;
            document.getElementById('choices').innerHTML = ''; // 清空选择信息
        });

        // 更新玩家选择状态
        socket.on('choice_update', function(data) {
            var choicesDiv = document.getElementById('choices');
            choicesDiv.innerHTML = ''; // 清空旧选择信息
            choicesDiv.innerHTML += data.nickname + ' 已做出选择<br>'; // 显示已做出选择的状态
        });

        function makeChoice(choice) {
            socket.emit('player_choice', {'choice': choice});
        }

        function getChoiceName(choice) {
            switch(choice) {
                case 'rock':
                    return '石头';
                case 'paper':
                    return '布';
                case 'scissors':
                    return '剪刀';
                default:
                    return '';
            }
        }
    </script>
</body>
</html>
